<template>
	<view>
		<view class="feedback-title">
			反馈意见
		</view>
		<view class="feedback-content">
			<textarea class="feedback-textarea" v-model="content" placeholder="请输入需要反馈的问题"></textarea>
		</view>
		<view class="feedback-title">
			相关图片
		</view>
		<view class="feedback-content-imgBox">
			<view class="feedback-content-imgItem" v-for="(item,index) in imageLists" :key="index">
				<view class="closeIcon" @click="deleteImg(index)">
					<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
				</view>
				<view class="image-box">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</view>

			<view class="feedback-content-imgItem" @click="addImage" v-if="imageLists.length<5">
				<view class="image-box">
					<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>

		</view>
		<button type="primary" class="subCommitBtn" @click="submitAdi">提交意见</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 添加图片逻辑
				//默认状态是一个空数组
				imageLists: [],
				content: ''

			}
		},
		methods: {
			deleteImg(index) {
				// index当前图片
				this.imageLists.splice(index, 1)
			},
			addImage() {
				// 调用选择图片的api
				// 最多选中多少个图片
				const count = 6 - this.imageLists.length
				uni.chooseImage({
					// 最多选中多少个图片
					count: count, //h5不支持
					// count: 5, 这种写法表示每次选择只能五张 不代表页面只能选择五张
					// 图片选择成功的回调
					// 这里要使用的是箭头函数 因为普通函数指向的是函数本身 而箭头函数才能购将this指向实例
					// 若不使用箭头函数就需要let _this = this
					success: (res) => {
						// 处理获取到的图片数组
						const tempfilepaths = res.tempFilePaths
						//数组循环获取
						tempfilepaths.forEach((item, index) => {
							// 控制上传图片数量
							if (index < count) {
								this.imageLists.push({
									// 压入数组的是对象
									url: item
								})
							}
						})
					}
				})
			},
			// 提交
			async submitAdi() {
				let imagesPath = []
				uni.showLoading()
				// 循环取得imageLists 这里不能使用foreach循环 for循环才能时数据同步
				for (let i = 0; i < this.imageLists.length; i++) {
					const filePath = this.imageLists[i].url
					filePath = await this.uploadFiles(filePath)
					imagesPath.push(filePath)
				}
				this.updateFeedback({
					content: this.content,
					feedbackImages: imagesPath
				})
			},
			async uploadFiles(filePath) {
				// 调用上传文件到云端的api
				const result = await uniCloud.uploadFile({
					// 需要有数据文件的路径
					filePath: filePath,
					// filePath: tempFile,
					cloudPath: "file",
				})
				console.log(result);
				return result.fileID
			},
			updateFeedback({
				content,
				feedbackImages
			}) {
				// 调用云函数
				this.$api.update_feedback({
					content,
					feedbackImages
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "反馈成功",
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/my/my'
						})
					}, 2000)

				}).catch(() => {
					uni.hideLoading()
					uni.showToast({
						title: "反馈失败",
						icon: "none"
					})
				})


			}

		}
	}
</script>

<style lang="scss">
	.feedback-title {
		margin: 15px;
		margin-bottom: 0;
		font-size: 16px;
		color: #666;
	}

	.feedback-content {
		margin: 15px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px #eee solid;

		.feedback-textarea {
			font-size: 14px;
			width: 100%;
			height: 100px;
		}
	}

	.feedback-content-imgBox {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;

		.feedback-content-imgItem {
			position: relative;
			width: 33%;
			height: 0;
			padding-top: 33%;
			box-sizing: border-box;

			.closeIcon {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				background-color: #ec0000;
				z-index: 2;
			}

			.image-box {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 5px;
				right: 5px;
				left: 5px;
				bottom: 5px;
				border: 1px #eee solid;
				border-radius: 5px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.subCommitBtn {
		margin: 0 15px;
		background-color: $mk-base-color;
	}
</style>
